<template>
  <f7-page name="upload" color-theme="red">
    <div class="bg_blur" ></div>
    <div style="position:absolute;left:0px;right:0px;height:100vh">
      <div class="navbarUpload">
        <div class="navbar_l" @click="$f7router.back()">
          <f7-button>
            <svg-icon iconClass="horn_down_white" />
          </f7-button>
        </div>
        <div class="navbar_m">
          <div class="mText">
            <span>上传歌曲</span>
          </div>
        </div>
        <div class="navbar_r"></div>
      </div>
      <div class="upload_box">
        <f7-row style="margin:0.2rem 0.2rem">
          <f7-col>
            <p>
              歌曲名:
              <input class="inputA" type="text" name="sname" v-model="u_name" />
            </p>
          </f7-col>
        </f7-row>
        <f7-row style="margin:0.2rem 0.2rem">
          <f7-col>
            <p>歌手: <input class="inputA" type="text" name="ssinger" v-model="u_singer" /></p>
          </f7-col>
        </f7-row>
        <f7-row style="margin:0.2rem 0.2rem">
          <f7-col>
            <p>
              歌曲描述:
              <input class="inputA" type="text" name="sdescription" v-model="u_description" />
            </p>
          </f7-col>
        </f7-row>
        <f7-row style="margin:0.2rem 0.2rem" v-if="!isUpdate">
          <f7-col>
            <p>
              mp3|m4a|mov等格式的音频文件:
            <input
            style="margin-top:12px"
              id="songFile"
              @change="
                (el) => {
                  handleFileChange(el, 'songFile')
                }
              "
              type="file"
              name="file"
            />
            </p>
            <p>{{ songFileTip }}</p>
          </f7-col>
        </f7-row>
        <f7-row style="margin:0.2rem 0.2rem">
          <f7-col>
            <p>
              lyc格式的歌词文件:
            <input
              style="margin-top:12px"
              id="lyricFile"
              @change="
                (el) => {
                  handleFileChange(el, 'lyricFile')
                }
              "
              type="file"
              name="file"
            />
            </p>
            <p>{{ lyricFileTip }}</p>
          </f7-col>
        </f7-row>
        <f7-row style="margin:0.2rem 0.2rem">
          <f7-col>
            <p>
              jpg|png|jpeg格式的歌曲封面:
            <input
              style="margin-top:12px"
              id="coverFile"
              @change="
                (el) => {
                  handleFileChange(el, 'coverFile')
                }
              "
              type="file"
              name="file"
            />
            </p>
            <p>{{ coverFileTip }}</p>
          </f7-col>
        </f7-row>
        <f7-row style="margin:0.2rem 0.2rem">
          <f7-col>
            <f7-button fill @click="handleSubmitBtnClick">提交</f7-button>
          </f7-col>
        </f7-row>
      </div>
    </div>
  </f7-page>
</template>
<script>
import { upload,updateSongInfo } from '@/api/upload.js'
export default {
  props:{
    isUpdate:{
      type:Boolean,
    },
    songInfo:{
      type:Object,
    },
  },
  data() {
    return {
      u_name: '',
      u_singer: '',
      u_description: '',
      u_song: '',
      u_lyric: '',
      songFileTip: '',
      lyricFileTip: '',
      coverFileTip:'',
      formData: new FormData(),
    }
  },
  methods: {
    handleFileChange(e, type) {
      const input = e.target
      const files = e.target.files
      if (files && files[0]) {
        const file = files[0]
        if (file.size > 1024 * 1024 * 30) {
          if (type === 'songFile') {
            this.songFileTip = '文件大小不能超过30M!'
          } else if (type === 'lyricFile') {
            this.lyricFileTip = '文件大小不能超过30M!'
          } else {
            this.coverFileTip = '文件大小不能超过30M!'
          }

          input.value = ''
          return false
        } else {
          if (type === 'songFile') {
            this.songFileTip = ''
            if (this.u_name === ''){
              this.u_name = file.name.substring(0, file.name.lastIndexOf('.'))
            }
            this.formData.append('songFile', file)
          } else if (type === 'lyricFile') {
            this.lyricFileTip = ''
            this.formData.append('lyricFile', file)
          } else {
            this.coverFileTip = ''
            this.formData.append('coverFile', file)
          }
        }
      }
    },
    handleSubmitBtnClick() {
      if (!this.formData.get('songFile') && !this.isUpdate) {
        alert('请上传歌曲文件')
        return
      }
      if (!this.u_singer) {
        alert('请填写歌手信息')
        return
      }
      this.formData.append('name', this.u_name)
      this.formData.append('singer', this.u_singer)
      this.formData.append('descrition', this.u_description)
      if (this.isUpdate){
        this.formData.append('id',this.songInfo.songId)
      }
      //更新歌手，歌词等信息
      let self=this;
      if (this.isUpdate){
        self.$f7.dialog.preloader()
        updateSongInfo(this.formData)
        .then((res) => {
          self.$f7.dialog.close()
          if (res.code === 200) {
            this.$f7ready((f7) => {
              let upLoadNewSongInfo = {
                lyric:res.data.lyricUrl,
                singer:self.u_singer,
                name:self.u_name,
              }
              self.$bus.$emit('updateSongInfoAfterUpdate',upLoadNewSongInfo);
              var toastTop = f7.toast.create({
                text: '上传成功',
                position: 'top',
                closeTimeout: 1500,
              })
              toastTop.open()

              f7.views.main.router.back()
            })
          }
        })
        .catch((err) => {
          console.log(err)
        })
      }
      //新上传歌曲
      else {
        self.$f7.dialog.preloader()
        upload(this.formData)
        .then((res) => {
          self.$f7.dialog.close()
          if (res.code === 200) {
            this.$f7ready((f7) => {
              var toastTop = f7.toast.create({
                text: '上传成功',
                position: 'top',
                closeTimeout: 1500,
              })
              toastTop.open()
              f7.views.main.router.back()
            })
          }
        })
        .catch((err) => {
          console.log(err)
        })
      }
      
    },
  },

  mounted() {
    console.log('upload...',this.isUpdate,this.songInfo);
    if (this.songInfo.name){
      this.u_name = this.songInfo.name;
      this.u_singer = this.songInfo.singer;
    }
    
    
  },
}
</script>

<style lang="scss" scoped>
span,p{
  color:#ffffff;
  font-size:16px;

}
.inputA{
  border-bottom:1px solid #ffffff;
}
.bg_blur{
  float: left;
  width: 100%;
  height: 100vh;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  -webkit-filter: blur(2px);
  -moz-filter: blur(2px);
  -o-filter: blur(2px);
  -ms-filter: blur(2px);
  filter: blur(2px);
  background: url('../assets/img/playerInfo_bg.jpg');
}
.navbarUpload {
  display: flex;
  align-items: center;
  height: 9vh;
  .navbar_l {
    width: 12vw;
    .svg-icon {
      width: 10vw;
      height: 10vw;
    }
  }
  .navbar_m {
    flex: 1;
    width: 72vw;
    margin-left: 1vw;
    span {
      font-size: 18px;
      white-space: nowrap;
    }
    .mText {
      width: 72vw;
    }
  }
}
.upload_box{
  height:90vh;
  overflow-y: scroll;
}
</style>
